<template>
  <div class="tarBar">
    <TabBarItem v-for="(item, index) in tabBars" :key="index" :className="item.className" :title="item.title"
      :path="item.path" :class="selectIndex == index ? 'select':'normal'" @changeIndex="changeIndex(index)">
    </TabBarItem>
  </div>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  import TabBarItem from '@/components/TabBarItem.vue'
  export default {
    name: 'TabBar',
    data: function () {
      return {

      }
    },
    props: {
      tabBars: Array,
    },
    methods: {
      changeIndex(index) {
        //通知vuex完成导航标题的更改
        this.changeTitle(this.tabBars[index].title);
        this.changeTabIndex(index);
      },
      ...mapMutations(['changeTitle', 'changeTabIndex'])
    },
    components: {
      TabBarItem,
    },
    computed: {
      selectIndex() {
        return this.$store.state.tab.tabIndex;
      }
    },
  }
</script>

<style scoped lang="less">
  .tarBar {
    width: 100%;
    height: 48px;
    /* no */
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
  }
</style>